<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>详情页</title>
    <!-- Bootstrap -->
    <link rel="shortcut icon" href="../favicon.ico" type="text/css" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/docs.min.css" rel="stylesheet" type="text/css" />
    <link href="../font/iconfont.css" rel="stylesheet">
    <link href="../css/cloudzoom.css" rel="stylesheet">
    <link href="../css/main.css" rel="stylesheet">
    <link href="../css/detail.css" type="text/css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   		<!-- *********************头部导航***************** -->
   		<nav class="navbar navbar-default  navbar-fixed-top">
		  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#"><img src="../img/logo.png"></a>
		    </div>
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="../index.html">首页</a></li>
		        <li><a href="#">健康用品</a></li>
		        <li><a href="#">热销产品</a></li>
		        <li><a href="#">美容护肤</a></li>
		        <li><a href="#">时尚精品</a></li>
		        <li><a href="#">餐具百货</a></li>
		        <li><a href="#">产品综合</a></li>
		      </ul>		
		      <ul class="nav navbar-nav navbar-right">
		      	<li><a href="login.html">登录</a></li>
		        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> 我的购物车 <span class="badge">0</span></a></li>
		      	<li class="dropdown">
		      	 	<a href="login.html" class="dropdown-toggle" data-toggle="dropdown">登录<span class="caret"></span></a>
		      	 	<ul class="dropdown-menu">
		      	 		<li><a href="#"><span class="glyphicon glyphicon-user"></span> 个人中心</a></li>
		      	 		<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> 我的购物车</a></li>
		      	 		<li class="divider"></li>
		      	 		<li><a  data-toggle="modal" data-target="#myModal1">Launch demo modal</a></li>
		      	 	</ul>
		      	</li>
		      </ul>  
		       <form class="navbar-form navbar-left">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Search">
		        </div>
		        <button type="submit" class="btn btn-default">搜索</button>
		    	</form>
		    </div><!-- /.navbar-collapse -->
		   
		  </div><!-- /.container-fluid -->
		</nav>
		<!-- *********************产品详情***************** -->
		<div class="container pro_deatil">
			<div class="row top">
				<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
					<div class="jqueryzoom">
						<img id="img" class="cloudzoom" src="../img/pro3.jpg"
						 data-cloudzoom="zoomSizeMode:'image',zoomImage: '../img/big_pro3.jpg',autoInside: 30" alt="" title=""/>
					 </div>
				</div>
				<div class="col-md-5 col-lg-5 col-sm-12 col-xs-12 des">
					<div class="des_title">得能燕麦力片压片糖果</div>
					<div class="des_content">
						<dl><dt class="pull-left">市场价 :</dt><dd><s>￥1600.00</s></dd></dl>
						<dl><dt class="pull-left">会员价 :</dt><dd>￥1600.00</dd></dl>
						<dl><dt class="pull-left">积分 :</dt><dd>￥1600.00</dd></dl>
						<dl><dt class="pull-left">销量 :</dt><dd>884</dd></dl>
						<dl><dt class="pull-left">库存 :</dt><dd>10000</dd></dl>
						<dl><dt class="pull-left">规格 :</dt><dd>&nbsp;</dd></dl>
						<dl>
							<dt class="pull-left">数量 :</dt>
							<dd>
								<button class="btn btn-default" id="min">－</button>
								<input type="text" name="" placeholder="1" id="num" onkeyup="value=value.replace(/[^\d]/g,'')">
								<button class="btn btn-default" id="plus">＋</button>
							</dd>
						</dl>
					</div>
					<button class="btn btn-lg btn-danger" type="button">加入购物车</button>
				</div>
				<div class="col-md-3 col-lg-3 des_right">
					<div class="content">
						<div class="title">
							<img src="../img/shang.png"> &nbsp;&nbsp;   0
						</div>
					</div>
				</div>
			</div>
			<div class="row bottom">
				<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
					<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
					    <ul id="myTabs" class="nav nav-tabs" role="tablist">
					      <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">商品详情</a></li>
					      <li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">用户评价</a></li>					 
					    </ul>
					    <div id="myTabContent" class="tab-content">
					      <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">
					        <img src="../img/detail1.jpg" />
					      </div>
					      <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
					        <p>牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼牛逼</p>
					      </div>					   
					    </div>
					  </div>
				</div>
			</div>
		</div>
		<!-- *************************联系我们*************** -->
		<div class="contact">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<i class="glyphicon glyphicon-globe"></i>
						<span>Global Business Associates</span>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<i class="glyphicon glyphicon-phone-alt"></i>
						<span>电话：400-0077-123</span>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<i class="glyphicon glyphicon-home"></i>
						<span>哇噻云积分商城</span>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6  last">
						<i class="glyphicon glyphicon-map-marker"></i>
						<span>山东·济南</span>
					</div>
				</div>
			</div>			
		</div>
		<!-- *************************底部*************** -->
		<div class="container footer">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<p class="title">服务协议</p>
					<ul class="list">
						<li><a href="售后服务.html">售后服务</a></li>
						<li><a href="消费者保障.html">消费者保障</a></li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<p class="title">购物指南</p>
					<ul class="list">
						<li><a href="购物流程.html">购物流程</a></li>
						<li><a href="付款方式.html">付款方式</a></li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<p class="title">会员注册</p>
					<ul class="list">
						<li><a href="注册协议.html">注册协议</a></li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<p class="title">商城二维码</p>
					<img src="../img/erweima.png">
				</div>
			</div>
		</div>
		<!-- **********************工具箱 *************************-->
		<div class="tool_box clearfix">
			<ul class="icon pull-left">
				<li class="QQ_icon active"><span class="iconfont">&#xe6e2;</span></li>
				<li class="wx_icon"><span class="iconfont">&#xe64f;</span></li>
			</ul>
			<div class="box_item pull-left">
				<div class="QQ">
					<p>在线QQ客服</p>
					<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=2184892090&amp;site=qq&amp;menu=yes" class="qq_link"><img border="0" src="http://wpa.qq.com/pa?p=2:2184892090:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
				</div>
				<div class="wx">
					<div class="wx_img">
						<img src="../img/wx.png">
					</div>
					<p>扫码联系我们</p>
				</div>
			</div>
		</div>
		<!-- *************************返回顶部*************** -->
		<div id="back-to-top" title="Scroll Back to Top"><i class="glyphicon glyphicon-menu-up"></i></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../js/jquery-2.1.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/docs.min.js"></script>
    <script src="../js/cloudzoom.js"></script>
    <script src="../js/detail.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/javascript">
    	CloudZoom.quickStart();
    </script>
  </body>
</html>